<!DOCTYPE html>

<!-- $Id: index.html 79 2012-03-14 12:55:47Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.select - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

.ex4 .ajp-item img { float: left; margin-right: 1em; margin-top: 1em; }


.ex7 {
	border: 0;
	width: 178px;
}

.ex7:hover {
	border: 0;
}

.ex7 .ajp-selected {
	display: none;
}
.ex7 .ajp-current {
	font-size: 1.32em;
	font-style: italic;
	color: #FF0498;
	border-bottom: 1px dashed #FF0498;
	width: 148px;
}
.ex7 .ajp-list-top {
	height: 4px;
	background: #FF0498;
}
.ex7 .ajp-list-bottom {
	height: 10px;
	background: url(ex7-bottom.png);
}
.ex7 .ajp-disclosure-arrow {
	margin-top: 0.66em;
	background: url(ex7-disclosure-arrow.png);
}
.ex7 .ajp-list {
	border: 0;
	width: 170px;
	max-height: none !important;
	top: -1px;

	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.ex7 .ajp-list-items {
	margin: 0 !important;
	width: 170px !important;
}

.ex7 .ajp-item {
	padding-left: 10px;
	border: 0;
	background: #eee;
}
.ex7 .ajp-item, .ex7 .ajp-item * {
	color: #FF0498 !important;
}
.ex7 .ajp-item:hover {
	background: #eee;
}
.ex7 .ajp-item:hover a {
	color: #aF0458 !important;
}
.ex7 .ajp-list {
	width: 168px;
	margin-top: -1px;
}


</style>

<script>

$(document).ready(function () {

	function getItemHtml($opt) {
		var html = $opt.data('ajp-html')
		return (html ? html : $opt.text())
	}	

	$('#ex1').ajp$select({ action: 'click', scrollbars: 'vertical', searchbox: true })

	$('#ex2').ajp$select({ scrollbars: 'vertical' })

	$('#ex3').ajp$select()

	$('#ex4').ajp$select({ getItemContent: getItemHtml })

	$('#ex5').ajp$select()

	$('#ex6').ajp$select({ scrollbars: 'native' })

	$('#ex7').ajp$select({ action: 'hover', getItemContent: getItemHtml, scrollbars: 'none' })
	$('#ex7').change(function () {
		$(this).children('option[value=1]').attr('selected', 'selected')
	})


	$('#ex1').change(function () {
		if (window.console && window.console.log)
			window.console.log('#ex1 changed to', $(this).val())
	})
})

</script>

</head>

<body class="controls shaded-controls">

	<select class="ex1-class" id="ex1">
		<option value="101">Opt 101</option>

		<option value="111">Opt 111</option>
		<option value="112">Opt 112</option>
		<option value="113">Opt 113</option>
		<option value="114">Opt 114</option>
		<option value="115">Opt 115</option>
		<option value="116">Opt 116</option>
		<option value="117">Opt 117</option>
		<option value="118">Opt 118</option>
		<option value="119">Opt 119</option>
		<option value="111.11">Opt 111.11</option>
		<option value="112.11">Opt 112.11</option>
		<option value="113.11" disabled="yes">Opt 113.11</option>
		<option value="114.11">Opt 114.11</option>
		<option value="115.11">Opt 115.11</option>
		<option value="116.11">Opt 116.11</option>
		<option value="117.11">Opt 117.11</option>
		<option value="118.11">Opt 118.11</option>
		<option value="119.11">Opt 119.11</option>

		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
		<option value="404">Opt 404</option>
		<option value="505">Opt 505</option>
		<option value="606">Opt 606</option>
		<option value="707">Opt 707</option>
		<option value="808">Opt 808</option>
		<option value="909">Opt 909</option>
		<option value="212" disabled="yes">Opt 212</option>
		<option value="313" disabled="yes">Opt 313</option>
		<option value="414">Opt 414</option>
		<option value="515">Opt 515</option>
		<option value="616">Opt 616</option>
		<option value="717">Opt 717</option>
		<option value="818" selected="yes">Opt 818</option>
		<option value="919">Opt 919</option>

	</select>

	<select class="ex2-class1 ex2-class2" id="ex2">
		<option value="101">Opt 101</option>
		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
	</select>

	<select class="ex3-class" id="ex3">
	</select>

	<select id="ex4" class="ex4">
		<option value="11" data-ajp-html="<img src=&quot;&quot;/><p>Lorem ipsum dolor sit amet, mel odio alia verear an. Ad vim reque labores, mel habemus tibique probatus ut. Vel ei oratio accumsan, no mei malis iudico oratio. Fuisset petentium gubergren per cu, id harum eirmod quo. Est cu duis forensibus reprimique, primis nusquam neglegentur ne pri. Quis novum movet an eum. Mei id erat noluisse urbanitas.</p>">Lorem ispum...</option>
		<option value="12" selected="yes" data-ajp-html="<img src=&quot;&quot;/><p>Vim in facer possit inermis, sea hinc prodesset ad. Et ipsum denique qui, quidam quodsi pericula vis te. Quo melius scripta an. Te vel petentium gubergren, ei his epicurei patrioque. Alia zril at est, qui graeci oblique moderatius ea.</p>">Vim in facer...</option>
		<option value="13" data-ajp-html="<img src=&quot;&quot;/><p>Te graeci gubergren euripidis his, ea sit quas melius praesent. Dicat nihil maiorum ut eos. In sed putent prompta, dolor interpretaris conclusionemque mel ei, eius partem soluta sed at. Oblique platonem ad duo, sed an autem fugit. Mel omnesque probatus adipisci at. Eu fabulas senserit eum, eos no possim nusquam honestatis.</p>">Te graeci gubergren...</option>
		<option value="14" data-ajp-html="<img src=&quot;&quot;/><p>Ex quo tantas ornatus. Euismod tacimates ei sed, his invenire dissentias ne. Et mundi legere ullamcorper est, integre denique usu te, prompta fuisset eloquentiam in vis. Mei eu legimus mentitum. An iudicabit euripidis neglegentur qui, nec ea tantas minimum rationibus, at eam posse quaestio sadipscing. Veri convenire vim ex, stet suscipiantur sea eu. Quando facete reprehendunt eos at, probo zril voluptatibus pro ad.</p>">Ex quo tantas...</option>
	</select>

	<select id="ex5" disabled="disabled">
		<option>Disabled...</option>
	</select>

	<select id="ex6">
		<option value="101">Opt 101</option>
		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
		<option value="404">Opt 404</option>
		<option value="505">Opt 505</option>
		<option value="606">Opt 606</option>
		<option value="707">Opt 707</option>
		<option value="808">Opt 808</option>
		<option value="909">Opt 909</option>
		<option value="111" disabled="yes">Opt 111</option>
		<option value="212" disabled="yes">Opt 212</option>
		<option value="313" disabled="yes">Opt 313</option>
		<option value="414">Opt 414</option>
		<option value="515">Opt 515</option>
		<option value="616">Opt 616</option>
		<option value="717">Opt 717</option>
		<option value="818" selected="yes">Opt 818</option>
		<option value="919">Opt 919</option>
	</select>

	<hr/>

	<select id="ex7" class="ex7">
		<option value="1">Other examples</option>
		<option value="2" data-ajp-html="&raquo; <a href=&quot;../autocomplete/&quot;>autocomplete</a>">autocomplete</option>
		<option value="3" data-ajp-html="&raquo; <a href=&quot;../scrollable/&quot;>scrollable</a>">scrollable</option>
		<option value="4" data-ajp-html="&raquo; <a href=&quot;../starating/&quot;>starating</a>">starating</option>
		<option value="5" data-ajp-html="&raquo; <a href=&quot;../placeholder/&quot;>placeholder</a>">placeholder</option>
	</select>


</body>

